home *** CD-ROM | disk | FTP | other *** search
/ Micro Dingo 39 / Micro_Dingo_39_CD2.mdx / Themes XP / themes / FreeStyle Final / ANIMATE.JS next >
Text File  |  2001-01-09  |  16KB  |  667 lines
  1. <!--
  2.     // See KB article about changing this dynamic HTML
  3.     dynamicanimAttr = "dynamicanimation"
  4.     animCancel = "skipanim"
  5.     fpanimationPrefix = "fpAnim"
  6.     animateElements = new Array()
  7.     currentElement = 0
  8.     speed = 1
  9.     stepsZoom = 8
  10.     stepsWord = 8
  11.     stepsFly = 17
  12.     stepsSpiral = 16
  13.     stepsSpiralWord = 19
  14.     stepsElastic = 32
  15.     steps = stepsZoom
  16.     step = 0
  17.     cornerPhase=0
  18.     outEffect=0
  19.     function remSuffix(str)
  20.     {
  21.         ind=str.indexOf("FP")
  22.         str = str.substring(0,ind)
  23.         return str
  24.     }
  25.     function dynAnimOut(el)
  26.     {
  27.         outEffect=1
  28.         dynAnimation(el)
  29.         outEffect=0
  30.     }
  31.     function dynAnimation(obj)
  32.     {        
  33.         animateElements = new Array()
  34.         var ms = navigator.appVersion.indexOf("MSIE")
  35.         var macness = navigator.appVersion.indexOf("Macintosh")
  36.  
  37.         ie4 = (ms>0) && (parseInt(navigator.appVersion.substring(ms+5, ms+6)) >= 4)
  38.         ns6 = false
  39.         if(!ie4)
  40.         {
  41.             if((navigator.appName == "Netscape") &&
  42.                 (parseInt(navigator.appVersion.substring(0, 1)) >= 5))
  43.             {
  44.                 ns6=true
  45.                 doc_els=document.getElementsByTagName('*')
  46.             }
  47.             else if((navigator.appName == "Netscape") &&
  48.                 (parseInt(navigator.appVersion.substring(0, 1)) == 4))
  49.             {
  50.                 doc_els=document.layers
  51.             }
  52.             else
  53.                 return
  54.         }
  55.         else
  56.             doc_els=document.all
  57.         if(outEffect && !ie4)
  58.             return
  59.         if(ie4)
  60.         {
  61.             for (index=document.all.length-1; index >= document.body.sourceIndex; index--)
  62.             {
  63.                 el = document.all[index]
  64.                 if(outEffect && el != obj)
  65.                     continue
  66.                 if(outEffect)
  67.                     animationId = el.id.substring(9,el.id.length)
  68.                 else
  69.                     animationId = el.id.substring(6,el.id.length)
  70.                 animation=remSuffix(animationId)
  71.                 if(null != animation)
  72.                 {
  73.                     altcnt=0
  74.                     if(    animation == "dropWord"                ||
  75.                         animation == "flyTopRightWord"            ||
  76.                         animation == "flyBottomRightWord"        ||
  77.                         animation == "waveWords"            ||
  78.                         animation == "hopWords")
  79.                     {
  80.                         ih = el.innerHTML
  81.                         outString = ""
  82.                         i1 = 0
  83.                         iend = ih.length
  84.                         while(true)
  85.                         {
  86.                             i2 = startWord(ih, i1)
  87.                             if(i2 == -1)
  88.                             i2 = iend
  89.                             outWord(ih, i1, i2, false, "", outEffect ? obj.id : el.id)
  90.                             if(i2 == iend)
  91.                                 break
  92.                             i1 = i2
  93.                             i2 = endWord(ih, i1)
  94.                             if(i2 == -1)
  95.                                 i2 = iend
  96.                             if (animation == "waveWords")
  97.                                 outWordAlt(ih, i1, i2, true, animation, altcnt)
  98.                             else
  99.                                 outWord(ih, i1, i2, true, (outEffect ? "Out" : "") + animation,
  100.                                     outEffect ?  obj.id : el.id)
  101.  
  102.                             if(i2 == iend)
  103.                                 break
  104.                             i1 = i2
  105.                             altcnt++
  106.                         }
  107.                         document.all[index].innerHTML = outString
  108.                         document.all[index].style.posLeft = 0
  109.                         document.all[index].setAttribute(animCancel, true)
  110.                         document.all[index].style.visibility="visible"
  111.                     }
  112.                 }
  113.             }
  114.         }
  115.         i = 0
  116.         for (index=0; index < doc_els.length; index++)
  117.         {
  118.             el = doc_els[index]
  119.             if(0 != el.id.indexOf(fpanimationPrefix))
  120.                 continue
  121.             if (ie4)
  122.             {
  123.                 elprops=el.style
  124.                 scrollOffsetTop=document.body.scrollTop
  125.                 docHeight=document.body.offsetHeight
  126.                 docWidth=document.body.offsetWidth
  127.                 elW=100
  128.                 elH=el.offsetHeight
  129.             }
  130.             else
  131.             {
  132.                 scrollOffsetTop=window.pageYOffset
  133.                 docHeight=window.innerHeight
  134.                 docWidth=window.innerWidth
  135.                 if (ns6)
  136.                 {
  137.                     elprops=el.style
  138.                     elW=100
  139.                     elH=el.offsetHeight
  140.                 }
  141.                 else{
  142.                     elprops=el
  143.                     elW=el.clip.width
  144.                     elH=el.clip.height
  145.                 }
  146.             }
  147.             if(outEffect)
  148.                 animationId = el.id.substring(9,el.id.length)
  149.             else
  150.                 animationId = el.id.substring(6,el.id.length)
  151.             animation=remSuffix(animationId)
  152.             if(outEffect && (obj != el))
  153.             {
  154.                 if(el.SRCID != obj.id)
  155.                     continue
  156.             }
  157.             if (null != animation )
  158.             {
  159.                 if(ie4 && null!=el.getAttribute(animCancel, false))
  160.                     continue
  161.                 if(!ie4)
  162.                 {
  163.                     elprops.posLeft=elprops.left
  164.                     elprops.posTop=elprops.top
  165.                 }
  166.                 el.startL=offsetLeft(el)
  167.                 if(animation == "flyLeft")
  168.                 {
  169.                     elprops.posLeft = -offsetLeft(el)-elW
  170.                     elprops.posTop = 0
  171.                 }
  172.                 else if(animation == "flyRight" || animation=="elasticRight")
  173.                 {
  174.                     elprops.posLeft = -offsetLeft(el)+docWidth
  175.                     elprops.posTop = 0
  176.                 }
  177.                 else if(animation == "flyTop" || animation == "dropWord")
  178.                 {
  179.                     elprops.posLeft = 0
  180.                     elprops.posTop = scrollOffsetTop-offsetTop(el)-elH
  181.                 }
  182.                 else if(animation == "flyBottom" || animation == "elasticBottom")
  183.                 {
  184.                     elprops.posLeft = 0
  185.                     elprops.posTop = scrollOffsetTop-offsetTop(el)+docHeight 
  186.                 }
  187.                 else if(animation == "flyTopLeft")
  188.                 {
  189.                     elprops.posLeft = -offsetLeft(el)-elW
  190.                     elprops.posTop = scrollOffsetTop-offsetTop(el)-elH
  191.                 }
  192.                 else if(animation == "flyTopRight" || animation == "flyTopRightWord")
  193.                 {
  194.                     elprops.posLeft = -offsetLeft(el)+docWidth
  195.                     elprops.posTop = scrollOffsetTop-offsetTop(el)-elH
  196.                 }
  197.                 else if(animation == "flyCorner")
  198.                 {
  199.                     elprops.posLeft = docWidth*0.2-offsetLeft(el)
  200.                     
  201.                     elprops.posTop = scrollOffsetTop-offsetTop(el)+docHeight 
  202.                 }
  203.                 else if(animation == "flyBottomLeft")
  204.                 {
  205.                     elprops.posLeft = -offsetLeft(el)-elW
  206.                     elprops.posTop = scrollOffsetTop-offsetTop(el)+docHeight
  207.                 }
  208.                 else if(animation == "flyBottomRight" || animation == "flyBottomRightWord")
  209.                 {
  210.                     elprops.posLeft = -offsetLeft(el)+docWidth
  211.                     elprops.posTop = scrollOffsetTop-offsetTop(el)+docHeight
  212.                 }
  213.                 else if(animation == "spiral")
  214.                 {
  215.                     elprops.posLeft = -offsetLeft(el)+docWidth
  216.                     elprops.posTop = scrollOffsetTop-offsetTop(el)+docHeight
  217.                 }
  218.                 else if((animation.indexOf("waveWords") != -1) || animation=="hopWords")
  219.                 {
  220.                     if(i)
  221.                     {
  222.                         prevEl=animateElements[i-1]
  223.                         elprops.r = offsetLeft(el)-prevEl.startL
  224.                     }
  225.                     else
  226.                         elprops.r = offsetLeft(el)
  227.                 }
  228.                 else if(animation == "wipeLR" || animation == "wipeMID")
  229.                 {
  230.                     if (ie4 && elprops.position=="absolute")
  231.                     {
  232.                         el.sizeW=el.offsetWidth
  233.  
  234.                         if(macness < 0)
  235.                             elprops.clip="rect(0 0 0 0)"
  236.                     }
  237.                     else if (!ie4)
  238.                     {
  239.                         if (ns6)
  240.                         {
  241.                             elprops.clip="rect(0 0 0 0)"
  242.                         }
  243.                         else{
  244.                             el.sizeW=el.clip.width
  245.                             el.clip.width=0
  246.                         }
  247.                     }
  248.                 }
  249.                 else if(animation == "wipeTB")
  250.                 {
  251.                     if (ie4 && elprops.position=="absolute")
  252.                     {
  253.                         elprops.clip="rect(0 0 0 0)"
  254.                     }
  255.                     else if(!ie4)
  256.                     {
  257.                         if (ns6)
  258.                         {
  259.                             elprops.clip="rect(0 0 0 0)"
  260.                         }
  261.                         else{
  262.                             el.sizeH=el.clip.height
  263.                             el.clip.height=0
  264.                         }
  265.                     }
  266.                 }
  267.                 else if(animation == "zoomIn")
  268.                 {
  269.                     elprops.posLeft = 0
  270.                     elprops.posTop = 0
  271.                 }
  272.                 else if(animation == "zoomOut")
  273.                 {
  274.                     elprops.posLeft = 0
  275.                     elprops.posTop = 0
  276.                 }
  277.                 else
  278.                 {
  279.                     continue
  280.                 }
  281.                 if(!outEffect)
  282.                 {
  283.                     el.initLeft = elprops.posLeft
  284.                     el.initTop  = elprops.posTop
  285.                     el.endLeft  = 0
  286.                     el.endTop   = 0
  287.                     elprops.visibility = "hidden"
  288.                 }
  289.                 else
  290.                 {
  291.                     el.initLeft = 0
  292.                     el.initTop  = 0
  293.                     el.endLeft = elprops.posLeft
  294.                     el.endTop  = elprops.posTop
  295.                     elprops.posTop = 0
  296.                     elprops.posLeft = 0
  297.                 }
  298.                 if(!ie4)
  299.                 {
  300.                     elprops.left=elprops.initLeft
  301.                     elprops.top =elprops.initTop
  302.                 }
  303.                 animateElements[i++] = el
  304.             }
  305.         }
  306.         if(animateElements.length > 0)
  307.         {
  308.             if(outEffect)
  309.                 window.setTimeout("animate(1);", speed, "Javascript")
  310.             else
  311.                 window.setTimeout("animate(0);", speed, "Javascript")
  312.         }
  313.     }
  314.     function offsetLeft(el)
  315.     {
  316.         if(ie4 || ns6)
  317.         {
  318.             x = el.offsetLeft
  319.             for (e = el.offsetParent; e; e = e.offsetParent)
  320.                 x += e.offsetLeft
  321.             return x
  322.         }
  323.         else
  324.         {
  325.             x = el.pageX
  326.             return x
  327.         }
  328.     } 
  329.     function offsetTop(el)
  330.     {
  331.         if(ie4 || ns6)
  332.         {
  333.             y = el.offsetTop
  334.             for (e = el.offsetParent; e; e = e.offsetParent)
  335.                 y += e.offsetTop;
  336.             return y
  337.         }
  338.         else
  339.         {
  340.             y = el.pageY
  341.             return y    
  342.         }
  343.     }
  344.     function startWord(ih, i)
  345.     {
  346.         for(tag = false; i < ih.length; i++)
  347.         {
  348.             c = ih.charAt(i)
  349.             if(c == '<')
  350.             {
  351.                 if(ih.substring(i+1, i+4) == "IMG")
  352.                 return i;
  353.                 tag = true
  354.             }
  355.             if(!tag)
  356.                 return i
  357.             if(c == '>')
  358.                 tag = false
  359.         }
  360.         return -1
  361.     }
  362.     function endWord(ih, i)
  363.     {
  364.         nonSpace = false
  365.         space = false
  366.         img = false
  367.         if(ih.charAt(i) == '<')
  368.         {
  369.             img = true
  370.             i++;
  371.         }
  372.         while(i < ih.length)
  373.         {
  374.             c = ih.charAt(i)
  375.             if(c != ' ')
  376.                 nonSpace = true
  377.             if(img && c == '>')
  378.                 img = false;
  379.             if(nonSpace && !img && c == ' ')
  380.                 space = true
  381.             if(c == '<')
  382.                 return i
  383.             if(space && c != ' ')
  384.                 return i
  385.             i++
  386.         }
  387.         return -1
  388.     }
  389.     function outWord(ih, i1, i2, dyn, anim, srcID)
  390.     {
  391.         if(dyn)
  392.             if(!outEffect)
  393.                 outString += "<SPAN ID=\"" +  fpanimationPrefix + anim + "FP\" style=\"position: relative; visibility: hidden;\">"
  394.             else
  395.                 outString += "<SPAN SRCID=\"" + srcID + "\"ID=\"" +  fpanimationPrefix + anim + "FP\" style=\"position: relative;\">"
  396.         outString += ih.substring(i1, i2)
  397.         if(dyn)
  398.             outString += "</SPAN>"
  399.     }
  400.     function outWordAlt(ih, i1, i2, dyn, anim, altcnt)
  401.     {
  402.         if(dyn)
  403.         {
  404.             if(altcnt%2)
  405.                 outString += "<SPAN ID=\"" +  fpanimationPrefix + anim + "LFP\" style=\"position: relative;  visibility: hidden;\">"
  406.             else
  407.                 outString += "<SPAN ID=\"" +  fpanimationPrefix + anim + "RFP\" style=\"position: relative;  visibility: hidden;\">"
  408.         }
  409.             
  410.         outString += ih.substring(i1, i2)
  411.         if(dyn)
  412.             outString += "</SPAN>"
  413.     }
  414.     function animate(animOut)
  415.     {
  416.         {
  417.             el = animateElements[currentElement]
  418.  
  419.             if(animOut)
  420.                 animationId = el.id.substring(9,el.id.length);
  421.             else
  422.                 animationId = el.id.substring(6,el.id.length);
  423.             animation=remSuffix(animationId)
  424.             if (ie4)
  425.                 elprops=el.style
  426.             else{
  427.                 if (ns6)
  428.                     elprops=el.style
  429.                 else
  430.                     elprops=el
  431.             }
  432.  
  433.             if(!step && !animOut)
  434.                 elprops.visibility="visible"
  435.             step++
  436.             if(animation == "spiral")
  437.             {
  438.                 steps = stepsSpiral
  439.                 v = step/steps
  440.                 rf = 1.0 - v
  441.                 t = v * 2.0*Math.PI
  442.                 rx = Math.max(Math.abs(el.initLeft), 200)
  443.                 ry = Math.max(Math.abs(el.initTop),  200)
  444.                 elprops.posLeft = Math.ceil(-rf*Math.cos(t)*rx)
  445.                 elprops.posTop  = Math.ceil(-rf*Math.sin(t)*ry)
  446.             }
  447.             else if(animation == "waveWordsL" || animation=="hopWords" || animation == "waveWords")
  448.             {
  449.                 steps = stepsSpiralWord
  450.                 v = step/steps
  451.                 rf = (1.0 - v)
  452.                 t = v * 1.0*Math.PI
  453.                 elprops.posLeft = Math.ceil(-rf*Math.cos(t)*elprops.r)
  454.                 elprops.posTop  = Math.ceil(-rf*Math.sin(t)*elprops.r)
  455.             }
  456.             else if(animation == "waveWordsR")
  457.             {
  458.                 steps = stepsSpiralWord
  459.                 v = step/steps
  460.                 rf = (1.0 - v)
  461.                 t = v * 1.0*Math.PI
  462.                 elprops.posLeft = Math.ceil(-rf*Math.cos(t)*elprops.r)
  463.                 elprops.posTop  = Math.ceil( rf*Math.sin(t)*elprops.r)
  464.             }
  465.             else if(animation == "zoomIn")
  466.             {
  467.                 steps = stepsZoom
  468.                 elprops.fontSize = Math.ceil(50+50*step/steps) + "%"
  469.                 elprops.posLeft = 0
  470.             }
  471.             else if(animation == "zoomOut")
  472.             {
  473.                 steps = stepsZoom
  474.                 fontSz=Math.ceil(100+200*(steps-step)/steps) + "%"
  475.                 elprops.fontSize = fontSz
  476.                 elprops.posLeft = 0
  477.             }
  478.             else if(animation == "elasticRight")
  479.             {
  480.                 steps = stepsElastic
  481.                 v = step/steps
  482.                 rf=Math.exp(-v*7)
  483.                 t = v * 1.5*Math.PI
  484.                 rx =Math.abs(el.initLeft)
  485.                 elprops.posLeft = rf*Math.cos(t)*rx
  486.                 elprops.posTop  = 0
  487.             }
  488.             else if(animation == "elasticBottom")
  489.             {
  490.                 steps = stepsElastic
  491.                 v = step/steps
  492.                 rf=Math.exp(-v*7)
  493.                 t = v * 2.5*Math.PI
  494.                 ry =Math.abs(el.initTop)
  495.                 elprops.posLeft = 0
  496.                 elprops.posTop  = rf*Math.cos(t)*ry
  497.             }
  498.             else if(animation == "wipeLR")
  499.             {
  500.                 steps = stepsElastic
  501.                 if(ie4 && elprops.position=="absolute")
  502.                     elprops.clip = "rect(0 "+ step/steps*100 +"% 100% 0)"
  503.                 else if (!ie4)
  504.                 {
  505.                     if (ns6)
  506.                     {
  507.                         postop = elprops.top
  508.                         posleft = elprops.left
  509.                         str="position:absolute;top:"+postop+";left:"+posleft+";clip:rect(0px " + step/steps*el.offsetWidth + "px "+el.offsetHeight+"px 0px)";
  510.                         el.setAttribute("style",str);
  511.                     }
  512.                     else
  513.                         elprops.clip.right=step/steps*el.sizeW
  514.                 }
  515.             }
  516.             else if(animation == "wipeTB")
  517.             {
  518.                 steps = stepsElastic
  519.                 if(ie4 && elprops.position=="absolute")
  520.                     elprops.clip = "rect(0 100% "+step/steps*el.offsetHeight+"px 0)"
  521.                 else{
  522.                     if (ns6)
  523.                     {
  524.                         postop = elprops.top
  525.                         posleft = elprops.left
  526.                         str="position:absolute;top:"+postop+";left:"+posleft+";clip:rect(0px "+ el.offsetWidth + "px " +step/steps*el.offsetHeight+"px 0px)";
  527.                         el.setAttribute("style",str);
  528.                     }
  529.                     else{
  530.                         elprops.clip.bottom=step/steps*el.sizeH        
  531.                     }
  532.                 }
  533.             }
  534.             else if(animation == "wipeMID")
  535.             {
  536.                 steps = stepsElastic
  537.                 if(ie4 && elprops.position=="absolute")
  538.                 {
  539.                     elprops.clip = "rect(0 "+el.sizeW/2*(1+step/steps)+"px 100% "+el.sizeW/2*(1-step/steps)+")"
  540.                 }
  541.                 else if(!ie4)
  542.                 {
  543.                     if (ns6)
  544.                     {
  545.                         postop = elprops.top
  546.                         posleft = elprops.left
  547.                         str="position:absolute;top:"+postop+";left:"+posleft+";clip:rect(0px "+ el.offsetWidth/2*(1+step/steps) + "px "+el.offsetHeight+"px "+el.offsetWidth/2*(1-step/steps)+"px)";
  548.                         el.setAttribute("style",str);    
  549.                     }
  550.                     else{
  551.                         elprops.clip.right=el.sizeW/2*(1+step/steps)
  552.                         elprops.clip.left=el.sizeW/2*(1-step/steps)
  553.                     }
  554.                 }
  555.             }
  556.             else if(animation == "flyCorner")
  557.             {
  558.                 if(!cornerPhase)
  559.                 {
  560.                     steps = stepsElastic/2
  561.                     v = step/steps
  562.                     rf=Math.exp(-v*7)
  563.                     t = v * 2.5*Math.PI
  564.                     ry =Math.abs(el.initTop)
  565.                     elprops.posTop  = Math.ceil(rf*Math.cos(t)*ry)
  566.                 }
  567.                 else
  568.                 {
  569.                     steps = stepsFly
  570.                     dl = el.initLeft / steps
  571.                     elprops.posLeft = elprops.posLeft - dl
  572.                     elprops.posTop = 0
  573.                 }
  574.             }
  575.             else
  576.             {
  577.                 steps = stepsFly
  578.                 if(animation == "dropWord" || animation == "flyTopRightWord" || animation == "flyBottomRightWord")
  579.                     steps = stepsWord
  580.                 dl = (el.endLeft - el.initLeft) / steps
  581.                 dt = (el.endTop  - el.initTop)  / steps
  582.                 elprops.posLeft = elprops.posLeft + dl
  583.                 elprops.posTop = elprops.posTop + dt
  584.             }
  585.             if (step >= steps) 
  586.             {
  587.                 if(!(animation == "wipeLR"    ||
  588.                     animation  == "wipeTB"    ||
  589.                     animation  == "wipeMID"    ||
  590.                     (animation == "flyCorner" && !cornerPhase)))
  591.                 {
  592.                     elprops.posLeft = el.endLeft
  593.                     elprops.posTop = el.endTop
  594.                 }
  595.                 if(animOut)
  596.                 {
  597.                     elprops.visibility="hidden"
  598.                 }
  599.  
  600.                 step = 0
  601.                 if(animation=="flyCorner" && !cornerPhase)
  602.                     cornerPhase=1
  603.                 else
  604.                 {
  605.                     cornerPhase=0
  606.                     currentElement++
  607.                 }
  608.  
  609.             }
  610.             if(!ie4)
  611.             {
  612.                 elprops.left = elprops.posLeft
  613.                 elprops.top = elprops.posTop
  614.             }
  615.             if(currentElement < animateElements.length)
  616.             {
  617.                 if(animOut)
  618.                     window.setTimeout("animate(1);", speed, "Javascript")
  619.                 else                    
  620.                     window.setTimeout("animate(0);", speed, "Javascript")
  621.             }
  622.             else
  623.                 currentElement=0
  624.         }
  625.     }
  626.     function rollIn(el)
  627.     {
  628.         var ms = navigator.appVersion.indexOf("MSIE")
  629.         ie4 = (ms>0) && (parseInt(navigator.appVersion.substring(ms+5, ms+6)) >= 4)
  630.         if(ie4)
  631.         {
  632.             el.initstyle=el.style.cssText;el.style.cssText=el.fprolloverstyle
  633.         }
  634.     }
  635.     function rollOut(el)
  636.     {
  637.         var ms = navigator.appVersion.indexOf("MSIE")
  638.         ie4 = (ms>0) && (parseInt(navigator.appVersion.substring(ms+5, ms+6)) >= 4)
  639.         if(ie4)
  640.         {
  641.             el.style.cssText=el.initstyle
  642.         }
  643.     }
  644.     function clickSwapStyle(el)
  645.     {
  646.         var ms = navigator.appVersion.indexOf("MSIE")
  647.         ie4 = (ms>0) && (parseInt(navigator.appVersion.substring(ms+5, ms+6)) >= 4)
  648.         if(ie4)
  649.         {
  650.             ts=el.style.cssText
  651.             el.style.cssText=el.fprolloverstyle
  652.             el.fprolloverstyle=ts
  653.         }
  654.     }
  655.     function clickSwapImg(el)
  656.     {
  657.         if(document.all || document.layers)
  658.         {
  659.             ts=el.src
  660.             el.src=el.lowsrc
  661.             el.lowsrc=ts
  662.         }
  663.     }
  664. //-->
  665.  
  666.  
  667.